<template>
	<HeaderModule></HeaderModule>
	<div class="advWra">
		<div class="title_top">
			<p>中舞网会员3大权益：数万元课程全免费、专属学舞功能、超多立减优惠</p>
			<div class="title_bottom">
				<div class="avatar">
					<img
						src="https://rs.dance365.com/photo/894159_1548137500_7eafa0daee8d4511834e76b0ee7e9526.jpg?imageView2/0/w/100/h/100/format/webp/ignore-error/1"
					/>
				</div>
				<div class="creator">
					<span>平台客服_人工</span>
					<el-button
						type="primary"
						color="#ff43d0"
						style="height: 20px; color: white; width: 45px"
						>lv50
					</el-button>
				</div>
				<div>
					<el-button
						type="primary"
						size="default"
						round
						color="#f9ebf1"
						style="color: #f93684"
						>+关注
					</el-button>
				</div>
				<div class="time">发布时间：19-02-02</div>
				<div class="iconItem left">
					<span
						><svg
							t="1666177617572"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="4861"
							width="20"
							height="20"
						>
							<path
								d="M956.9 499.4C865.7 315.1 700.6 192 512 192S158.3 315.1 67.1 499.4c-3.8 7.7-3.8 17.4 0 25.1C158.3 708.9 323.4 832 512 832s353.7-123.1 444.9-307.4c3.8-7.8 3.8-17.4 0-25.2zM734 695.1c-33.4 23.6-69.1 41.8-106 54-37.6 12.6-76.7 18.9-116 18.9s-78.4-6.3-116.1-18.9c-36.9-12.3-72.5-30.4-106-54-63-44.5-117.2-107.6-157.4-183.1 40.2-75.5 94.3-138.6 157.4-183.1 33.4-23.6 69.1-41.8 106-54C433.6 262.3 472.7 256 512 256s78.4 6.3 116.1 18.9c36.9 12.3 72.5 30.4 106 54 63 44.5 117.2 107.6 157.4 183.1-40.3 75.5-94.4 138.6-157.5 183.1z"
								p-id="4862"
								fill="#7D8090"
							></path>
							<path
								d="M511.4 352C422.8 352 351 423.6 351 512s71.8 160 160.4 160 160.4-71.6 160.4-160-71.9-160-160.4-160z m0 256c-53.1 0-96.4-43.1-96.4-96s43.2-96 96.4-96c53.1 0 96.4 43.1 96.4 96s-43.3 96-96.4 96z"
								p-id="4863"
								fill="#7D8090"
							></path></svg></span
					>17.1W
				</div>
				<div class="iconItem">
					<span
						><svg
							t="1666177507499"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="3646"
							width="20"
							height="20"
						>
							<path
								d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
								p-id="3647"
								fill="#7D8090"
							></path></svg></span
					>58
				</div>
				<div class="iconItem">
					<span
						><svg
							t="1666177714223"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="5843"
							width="20"
							height="20"
						>
							<path
								d="M509.606998 143.114488c9.082866 0 17.327644 4.840238 20.996197 12.331863l97.262184 197.441814c5.613858 11.403724 16.663518 19.358907 29.438473 21.216207l223.738737 32.552393c8.420787 1.215688 15.604396 6.851035 18.23327 14.254655 2.520403 7.18361 0.595564 15.062044-5.084808 20.586874L730.253304 601.611947c-8.949836 8.751315-12.994965 21.171182-10.916631 33.370015l38.011732 222.060515c1.325182 7.737218-2.165316 15.426341-8.905834 19.978007-4.088108 2.741437-8.861832 4.155646-13.812587 4.155646-4.022617 0-7.999185-0.972141-11.425214-2.740414L528.149307 775.671215c-5.768377-3.006474-12.155854-4.552689-18.542308-4.552689-6.364965 0-12.727882 1.547239-18.518772 4.552689L296.254819 878.348736c-3.559059 1.855254-7.602142 2.828418-11.668761 2.828418-4.861728 0-9.723455-1.459235-13.546527-4.022617-6.961552-4.684696-10.475586-12.419867-9.127891-20.155039l38.011732-222.016513c2.078335-12.198833-1.988284-24.619724-10.939143-33.370015L125.02397 441.443038c-5.635347-5.492084-7.55814-13.348006-5.061272-20.453844 2.63092-7.481392 9.812483-13.116739 18.298761-14.332427l223.674269-32.552393c12.839423-1.857301 23.867594-9.813506 29.481452-21.216207l97.194646-197.396789C492.325403 147.965983 500.590648 143.114488 509.606998 143.114488M509.606998 104.904235c-24.043602 0-45.922912 13.226233-56.177464 33.95637L356.189863 336.302419l-223.674269 32.54216c-22.983457 3.304256-42.100864 18.718317-49.481971 39.659255-7.381108 21.048385-1.812275 44.23241 14.431687 60.033281l163.916257 160.125931-38.011732 222.016513c-3.868097 22.408359 6.03239 44.819788 25.458835 57.94676 10.69662 7.116071 23.204491 10.784624 35.757388 10.784624 10.298554 0 20.663622-2.475378 30.055526-7.337105l194.987926-102.7205L704.662463 912.072815c9.369392 4.861728 19.712971 7.337105 29.990035 7.337105 12.57541 0 25.082258-3.668553 35.778878-10.784624 19.426445-13.126972 29.305443-35.538401 25.460882-57.94676l-38.012755-222.016513 163.937746-160.125931c16.22145-15.812127 21.810748-38.984896 14.408151-60.033281-7.402597-20.940938-26.51898-36.353976-49.503461-39.659255L663.04767 336.302419l-97.240695-197.441814C555.619962 118.131491 533.695626 104.904235 509.606998 104.904235L509.606998 104.904235z"
								p-id="5844"
								fill="#7D8090"
							></path></svg></span
					>111
				</div>
			</div>
		</div>
		<div class="contentWra">
			<div class="content_top">
				<p>中舞网会员</p>
				<p>花<span>超少</span>的课程</p>
				<p>学<span>超多</span>的课程</p>
				<p>尊享<span>神器</span>级学舞功能</p>
			</div>
			<div class="equity">
				<p><span>权益1</span>、数万元课程全部免费</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645598775211_1644403365000?imageView2/2/w/860/ignore-error/1"
				/>
				<p>
					会员专区的全部收费课程（当前七百多套），非会员正常购买的总值高达数万元！会员全部免费观看学习！
				</p>
				<p>会员专区每月还在持续增加更多课程，会员免费总价持续增加！</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645605893484_1645605621931?imageView2/2/w/860/ignore-error/1"
				/>
				<p>截图来自中舞网电脑版</p>
			</div>
			<div class="equity">
				<p><span>权益2</span>、会员专属学舞功能</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645598908962_1644404702000?imageView2/2/w/860/ignore-error/1"
				/>
				<p>
					会员尊享节拍口令、同屏对比、音频提取、音频剪辑、将缓存的资源视频保存到手机本地相册等会员专属学舞练舞功能，任何舞蹈作品视频都能学，随时随地、更高效率抢先学！
				</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645605927727_1645604914220?imageView2/2/w/860/ignore-error/1"
				/>
				<p><a href="#">点按这里</a>>>查看节拍口令使用说明</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645605941092_1645604960006?imageView2/2/w/860/ignore-error/1"
				/>
				<p><a href="#">点按这里</a>>>查看同屏对比使用说明</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645605953838_1645605012516?imageView2/2/w/860/ignore-error/1"
				/>
				<p><a href="#">点按这里</a>>>了解如何<span>从视频中提取音频！</span></p>
				<p><a href="#">点按这里</a>>>了解如何使用<span>音频剪辑</span>功能！</p>
				<p>
					<a href="#">点按这里</a
					>>>了解如何使用中舞网APP轻松传输音频（<span>导入、导出</span>）！
				</p>
				<p>注：部分功能在安卓和IOS设备可能有微量差异，请以实际上线为准。</p>
			</div>
			<div class="equity">
				<p><span>权益3</span>、会员专享立减优惠</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1645598828623_1644403367000?imageView2/2/w/860/ignore-error/1"
				/>
				<p>
					非会员专区的视频课、线下课、直播课等商品服务，会员购买可获超多的会员立减优惠，买的越多省的越多！
				</p>
				<p>&nbsp;</p>
				<img
					src="http://rs.dance365.com/photo/1604046596463_1604046427661?imageView2/2/w/860/ignore-error/1"
				/>
				<p>截图来自中舞网电脑版</p>
				<img
					src="http://rs.dance365.com/photo/1604046607359_1604046570754?imageView2/2/w/860/ignore-error/1"
				/>
			</div>
			<div class="equity">
				<div id="pink"><p>如何购买会员</p></div>
				<p>&nbsp;</p>
				<p>
					数万元课程全部免费、会员专属学舞功能、购买非会员专区课程会员尊享立减优惠，会员3大权益，冲着一项就购了！
				</p>
				<img
					src="http://rs.dance365.com/photo/1652865085139_rs_1652865117600?imageView2/2/w/860/ignore-error/1"
				/>
				<p>
					感受到中舞网会员的满满诚意了吗？
					任选以下方式，即刻购买，享受会员3大权益：
				</p>
				<p>1）点按这里>>直接购买&lt;&lt;</p>
				<p>
					2）手机下载中舞网APP，或者浏览器访问中舞网www.Dance365.com并登录，进入“我的-我的会员”，然后直接购买。
				</p>
				<p>3）扫码购买：</p>
				<div class="last">
					<img
						src="http://rs.dance365.com/photo/1645600451048_1645600167184?imageView2/2/w/860/ignore-error/1"
					/>
				</div>
			</div>
		</div>
		<div class="serviceWra">
			<div class="service">
				<div class="item">
					<el-badge :value="12">
						<el-button color="#ffeaf2" round style="color: #ff0084"
							>求音乐</el-button
						>
					</el-badge>
				</div>
				<div class="item">
					<el-badge :value="2">
						<el-button color="#ffeaf2" round>求配套用品</el-button>
					</el-badge>
				</div>
				<div class="item">
					<el-badge :value="23">
						<el-button color="#ffeaf2" size="default" round>求线下课</el-button>
					</el-badge>
				</div>
			</div>
		</div>
	</div>
	<Message></Message>
	<FooterModule></FooterModule>
	<div></div>
</template>

<script setup lang="ts">
import Message from "../../../components/message/index.vue"
</script>

<!-- 10.20日晚复制 -->
<style scoped>
.advWra {
	width: 100%;
	background-color: #eee;
}
.title_bottom .left {
	margin-left: 160px;
}

.iconItem .icon {
	line-height: 40px;
}
.iconItem {
	font-size: 14px;
	height: 20px;
	color: #7d8090;
	margin-left: 40px;
	line-height: 40px;
}
.title_top p:first-child {
	width: 860px;
	margin: 0 auto;
	font-size: 34px;
	color: #111;
	padding-top: 20px;
}

.title_top {
	box-sizing: border-box;
	background-color: white;
	width: 1060px;
	margin: 0 auto;
	padding: 49px 100px 0;
}
.time {
	margin-left: 50px;
	font-size: 14px;
	color: #7d8090;
}
.avatar img {
	width: 40px;
	height: 40px;
	margin-right: 9px;
}

.title_bottom {
	height: 40px;
}

.title_bottom div {
	line-height: 40px;
	float: left;
}

.creator span {
	height: 40px;
	font-size: 14px;
	line-height: 40px;
}

.contentWra {
	width: 1060px;
	margin-bottom: 24px;
	padding: 50px 100px;
	background-color: white;
	margin: 0 auto;
	box-sizing: border-box;
}

.content_top {
	box-sizing: border-box;
	padding: 10px 20px 20px;
	width: 860px;
	border: 2px solid #ddd;
	border-radius: 20px;
	height: 225px;
}
.content_top p {
	text-align: center;
	font-size: 14px;
	height: 40px;
	margin: 9px 0;
	line-height: 40px;
}
.content_top span {
	font-weight: 700;
}

.equity {
	box-sizing: border-box;
	margin-top: 20px;
	width: 860px;
	border: 2px solid red;
	padding: 14px 11px;
}
.equity p {
	font-size: 14px;
	margin: 7px 0;
}
.equity p:nth-child(1) {
	font-weight: bolder;
	font-size: 18px;
	text-align: center;
}
.equity p:nth-child(1) span {
	background-color: yellow;
	font-weight: 500;
}
#pink p {
	font-size: 20px;
	font-weight: 600;
	color: #fe007f;
	background-color: yellow;
	width: 150px;
	margin: 0 auto;
}
.equity img {
	width: 834px;
	margin: 0 auto;
}
.equity p span {
	font-weight: 700;
}
.equity p:last-child {
	text-align: center;
	font-size: 12px;
}
.serviceWra {
	margin: 0 auto;
	box-sizing: border-box;
	width: 1060px;
	background-color: #eee;
	padding-top: 20px;
}

.service {
	height: 70px;
	background-color: white;
	padding-left: 20px;
}

.item {
	display: inline-block;
	padding-right: 40px;
	margin-top: 20px;
}

.last img {
	width: 400px !important;
	height: 400px;
	padding: 0 217px;
}
</style>

<!-- <style scoped>
.advWra {
	width: 100%;
	background-color: #eee;
}

.title_top p:first-child {
	width: 860px;
	margin: 0 auto;
	font-size: 34px;
	color: #111;
	padding-top: 20px;
}

.title_top {
	box-sizing: border-box;
	background-color: white;
	width: 1060px;
	margin: 0 auto;
	padding: 49px 100px 0;
}

.avatar img {
	width: 40px;
	height: 40px;
	margin-right: 9px;
}

.title_bottom {
	height: 40px;
}

.title_bottom div {
	line-height: 40px;
	float: left;
}

.creator span {
	height: 40px;
	font-size: 14px;
	line-height: 40px;
}

.contentWra {
	width: 1060px;
	margin-bottom: 24px;
	padding: 50px 100px;
	background-color: white;
	margin: 0 auto;
	box-sizing: border-box;
}

.content_top {
	box-sizing: border-box;
	padding: 10px 20px 20px;
	width: 860px;
	border: 2px solid #ddd;
	border-radius: 20px;
	height: 225px;
}
.content_top p {
	text-align: center;
	font-size: 14px;
	height: 40px;
	margin: 9px 0;
	line-height: 40px;
}
.content_top span {
	font-weight: 700;
}

.equity {
	box-sizing: border-box;
	margin-top: 20px;
	width: 860px;
	border: 2px solid red;
	padding: 14px 11px;
}
.equity p {
	margin: 7px 0;
}
.equity p:nth-child(1) {
	font-weight: bolder;
	font-size: 18px;
	text-align: center;
}
.serviceWra {
	margin: 0 auto;
	box-sizing: border-box;
	width: 1060px;
	background-color: #eee;
	padding-top: 20px;
}

.service {
	height: 70px;
	background-color: white;
	padding-left: 20px;
}

.item {
	display: inline-block;
	padding-right: 40px;
	margin-top: 20px;
}
</style> -->
